<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <span @click="fn.back()" class="mui-action-back"><img class="back-btn" src="../../../../static/images/back.png"></span>
        <div class="header-search flex-center">{{data.titleName}}</div>
      </div>
    </header>
    <div class="assess-header">
      <div class="assess-num flex-center">{{data.TOTAL_SCORE_}}</div>
      <p class="flex-center">{{data.NAME_}}</p>
      <div class="morning-rangking">上年排名：{{data.UP_YEAR_RANKING_ || '0'}}</div>
      <div class="current-rangking">目前排名：{{data.YEAR_RANKING_}}</div>
    </div>
    <div class="mui-scroll-wrapper integral-marginTop record-member-lists">
      <div class="mui-scroll">
        <div class="work-message-item-header">
          <h3>{{rankType == 2 ? '党员' : '支部'}}积分近期明细</h3>
        </div>
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll mui-scroll-wrapper">
              <div class="mui-table-view organization-lists">

                      <div class="mui-table-view-cell" v-for="(data,index) in swipeData" :key="index">
                        <div class="flex-between-center">
                          <div class="organization-lists-title">{{data.RULE_NAME}}  {{computerScore(data)}}分</div>
                          <div class="flex-between-center integral-num">
                            <p>总积分</p>
                            <span class="mine-lists-money">{{data.TOTAL_SCORE_}}</span>
                          </div>
                        </div>
                        <p class="organization-lists-time">{{data.CREATE_TIME_}}</p>
                      </div>

                  <div class="text-center no-data" v-if="swipeData.length===0">
                    <img src="../../../../static/images/no_data.png" alt="">
                    <p>暂无数据</p>
                  </div>

                <div @click="lookMore" class="text-center no-data" v-if="swipeData.length>=10">
                  <p>查看更多>></p>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import tools from '@/utils/tools'
  import api from '@/common/config/api'
  import loginService from '@/service/loginService'
  import moment from 'moment'

  export default {
    name: 'zbIntegral',
    data () {
      return {
        fn: tools,
        swipeData: [],
        pageIndex: 0,
        options: {
          pullUpLoad: true,
          scrollbar: false
        },
        data: {},
        rankType: ''
      }
    },
    created () {
      this.data = this.$store.state.buildAssessData
      this.rankType = this.$store.state.rankType
      this.loadData()
    },
    methods: {
      computerScore(item){
        return (item.PLUS_REDUCE_STATUS_ == 1 ? '+' : '-') + item.POINTS_
      },
      loadData () {
        let data = {
          checkObject: this.rankType,
          keyword: "",
          pageIndex: 0,
          pageSize: 10,
          sortField: "createDate",
          sortOrder: "ASC",
          year: moment().format('YYYY')
        }
        loginService.getOwnTenDetailsList(data).then((res) => {
          if (res.code === 200 && res.data.length < 1) {
//            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
            return tools.tip('已无更多数据')
          }
          this.pageIndex++
          this.swipeData = this.swipeData.concat(res.data)
          setTimeout(() => {
//            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
            this.options.isPullUpLoad = false
          }, 100)
        })
      },
      onPullingUp () {
        console.log('onPullingUp')
//        this.loadData()
      },
      lookMore(){
        this.$router.push({path: `/rangkingDetails`})
      }
    }

  }
</script>

<style scoped>
  .mui-scroll {
    top:0;bottom:0;
  }
</style>
